﻿@{
    ViewBag.Title = "Customer";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<body onload="getLocation()">

    @*THỂ LOẠI PHIM HAY XEM*@
    <div class="panel" style="display: block; float: left; background-color: white; margin-top: 20px; margin-left: 15px">
        <div class="container">
            <div class="panel-header bg-lightBlue fg-white">
                THỂ LOẠI PHIM BẠN HAY XEM
            </div>
            <hr style="margin-top: 3px; background-color: black; height: 2px;" />
            <div style="display: block; margin: 0 auto;">
                <div style="float: left;">
                    <div class="tile quadro block" style="margin-left: 15px; border: solid; border-width: 1px">
                        <div class="tile-content image">
                            <img src="~/Image/FilmImage/Vertical/Am_muu_giay_got_nhon_vertical.jpg" style="height: 360px; width: 260px" />
                        </div>
                        <div style="margin-left: 7px; margin-top: 122%">
                            <button class="inverse" style="width: 120px">Mua vé ngay</button>
                            <button class="inverse" style="width: 120px">Xem lịch chiếu</button>
                        </div>
                    </div>
                    <div>
                        <h3 style="color: black; margin-left: 12px">Phim: Âm mưu giày gót nhọn</h3>
                    </div>
                </div>
                <div style="float: left;">
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 50px; margin-top: 0px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Qua_Tim_Mau.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 0px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Lua_Phat.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 0px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/MR PEABODY AND SHERMAN.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>

                    @*Thông tin khuyến mãi dòng 1*@
                    <div style="display: block">
                        <div style="margin-left: 48px; float: left">
                            <strong>Phim: Quả Tim Máu</strong><br />
                        </div>
                        <div style="margin-left: 90px; float: left">
                            <strong>Phim: Lửa Phật</strong><br />
                        </div>
                        <div style="margin-left: 120px; float: left">
                            <strong>Phim: Mr Peabody</strong><br />
                        </div>
                    </div>

                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 50px; margin-top: 20px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/Non_Stop_Vertical.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 20px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/RoboCop.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 20px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/Winters Tale.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>

                    @*Thông tin khuyến mãi dòng 2*@
                    <div style="display: block">
                        <div style="margin-left: 48px; float: left">
                            <strong>Phim: Non Stop</strong><br />
                        </div>
                        <div style="margin-left: 115px; float: left">
                            <strong>Phim: RoboCop</strong><br />
                        </div>
                        <div style="margin-left: 115px; float: left">
                            <strong>Phim: Winter's Tale</strong><br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @*CÁC PHIM ĐANG KHUYẾN MÃI*@
    <div class="panel" style="display: block; float: left; background-color: white; margin-top: 20px; margin-left: 15px">
        <div class="container">
            <div class="panel-header bg-lightBlue fg-white">
                CÁC PHIM ĐANG KHUYẾN MÃI
            </div>
            <hr style="margin-top: 3px; background-color: black; height: 2px;" />
            
        </div>
    </div>

    @*RẠP GẦN NHÀ*@
    <div class="panel" style="display: table-cell; float: left; background-color: white; margin-top: 20px; margin-left: 15px">
        <div class="container">
            <div class="panel-header bg-lightBlue fg-white">
                CÁC RẠP GẦN NHÀ BẠN
            </div>
            <hr style="margin-top: 3px; background-color: black; height: 2px;" />
            <div id="partialNearTheater">
                @Html.Partial("NearestTheater", new List<FTBS.Models.Entities.Concert.TheaterConcertEntity>())
            </div>            
        </div>
    </div>

    @*PHIM ĐƯỢC XEM NHIỀU*@
    <div class="panel" style="display: table-cell; float: left; background-color: white; margin-top: 20px; margin-left: 15px">
        <div class="container">
            <div class="panel-header bg-lightBlue fg-white">
                CÁC PHIM ĐANG ĐƯỢC XEM NHIỀU
            </div>
            <hr style="margin-top: 3px; background-color: black; height: 2px;" />
            <div style="display: block; margin: 0 auto;">
                <div style="float: left;">
                    <div class="tile quadro block" style="margin-left: 15px; border: solid; border-width: 1px">
                        <div class="tile-content image">
                            <img src="~/Image/FilmImage/Vertical/Am_muu_giay_got_nhon_vertical.jpg" style="height: 360px; width: 260px" />
                        </div>

                        <div style="margin-left: 7px; margin-top: 122%">
                            <button class="inverse" style="width: 120px">Mua vé ngay</button>
                            <button class="inverse" style="width: 120px">Xem lịch chiếu</button>
                        </div>
                    </div>
                    <div>
                        <h3 style="color: black; margin-left: 12px">Phim: Âm mưu giày gót nhọn</h3>
                    </div>
                </div>
                <div style="float: left;">
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 50px; margin-top: 0px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Qua_Tim_Mau.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 0px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Lua_Phat.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 0px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/MR PEABODY AND SHERMAN.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>

                    @*Thông tin khuyến mãi dòng 1*@
                    <div style="display: block">
                        <div style="margin-left: 48px; float: left">
                            <strong>Phim: Quả Tim Máu</strong><br />
                        </div>
                        <div style="margin-left: 90px; float: left">
                            <strong>Phim: Lửa Phật</strong><br />
                        </div>
                        <div style="margin-left: 120px; float: left">
                            <strong>Phim: Mr Peabody</strong><br />
                        </div>
                    </div>

                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 50px; margin-top: 20px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/Non_Stop_Vertical.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 20px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/RoboCop.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 20px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/Winters Tale.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>

                    @*Thông tin khuyến mãi dòng 2*@
                    <div style="display: block">
                        <div style="margin-left: 48px; float: left">
                            <strong>Phim: Non Stop</strong><br />
                        </div>
                        <div style="margin-left: 115px; float: left">
                            <strong>Phim: RoboCop</strong><br />
                        </div>
                        <div style="margin-left: 115px; float: left">
                            <strong>Phim: Winter's Tale</strong><br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @*PHIM SẮP CHIẾU*@
    <div class="panel" style="display: table-cell; float: left; background-color: white; margin-top: 20px; margin-left: 15px">
        <div class="container">
            <div class="panel-header bg-lightBlue fg-white">
                CÁC PHIM SẮP CHIẾU
            </div>
            <hr style="margin-top: 3px; background-color: black; height: 2px;" />
            <div style="display: block; margin: 0 auto;">
                <div style="float: left;">
                    <div class="tile quadro block" style="margin-left: 15px; border: solid; border-width: 1px">
                        <div class="tile-content image">
                            <img src="~/Image/FilmImage/Vertical/Am_muu_giay_got_nhon_vertical.jpg" style="height: 360px; width: 260px" />
                        </div>

                        <div style="margin-left: 7px; margin-top: 122%">
                            <button class="inverse" style="width: 120px">Mua vé ngay</button>
                            <button class="inverse" style="width: 120px">Xem lịch chiếu</button>
                        </div>
                    </div>
                    <div>
                        <h3 style="color: black; margin-left: 12px">Phim: Âm mưu giày gót nhọn</h3>
                        <h3 style="color: black; margin-left: 12px; font-size: 17px">Ngày chiếu: 13/03/2014</h3>
                    </div>
                </div>
                <div style="float: left;">
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 50px; margin-top: 0px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Qua_Tim_Mau.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 0px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Lua_Phat.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 0px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/MR PEABODY AND SHERMAN.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>

                    @*Thông tin khuyến mãi dòng 1*@
                    <div style="display: block">
                        <div style="margin-left: 48px; float: left">
                            <strong>Phim: Quả Tim Máu</strong><br />
                            <strong>Ngày chiếu: 13/03/2014</strong><br />
                        </div>
                        <div style="margin-left: 62px; float: left">
                            <strong>Phim: Lửa Phật</strong><br />
                            <strong>Ngày chiếu: 13/03/2014</strong><br />
                        </div>
                        <div style="margin-left: 60px; float: left">
                            <strong>Phim: Mr Peabody</strong><br />
                            <strong>Ngày chiếu: 13/03/2014</strong><br />
                        </div>
                    </div>

                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 50px; margin-top: 20px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/Non_Stop_Vertical.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 20px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/RoboCop.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; height: 50px; width: 50px; margin: 150px; margin-left: 20px; margin-top: 20px">
                        <div class="tile double">
                            <div class="tile-content image">
                                <img src="~/Image/FilmImage/Vertical/Winters Tale.jpg" style="height: 200px; width: 159px" />
                            </div>
                            <div>
                                <button class="small warning" style="margin-left: 1.25px; margin-top: 165px">Lịch chiếu</button>
                                <button class="small warning" style="width: 76px; margin-top: 165px">Mua vé   </button>
                            </div>
                        </div>
                    </div>

                    @*Thông tin khuyến mãi dòng 2*@
                    <div style="display: block">
                        <div style="margin-left: 48px; float: left">
                            <strong>Phim: Non Stop</strong><br />
                            <strong>Ngày chiếu: 13/03/2014</strong><br />
                        </div>
                        <div style="margin-left: 62px; float: left">
                            <strong>Phim: RoboCop</strong><br />
                            <strong>Ngày chiếu: 13/03/2014</strong><br />
                        </div>
                        <div style="margin-left: 60px; float: left">
                            <strong>Phim: Winter's Tale</strong><br />
                            <strong>Ngày chiếu: 13/03/2014</strong><br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> 
<script>
    var location1, location2;
    var listTheater;

    function getLocation() {
        //listTheater = lstTheater;
        // One-shot position request.
        navigator.geolocation.getCurrentPosition(callback);
    }

    function callback(position) {
        location1 = position;
        $.ajax({
            url: "/Home/NearestTheater",
            type: "POST",
            data: { latitude: position.coords.latitude, longitude: position.coords.longitude },
            success: function (data) {
                $('#partialNearTheater').html(data);
            },
            error: function (data) {
                alert("fail");
            }
        });


        //alert(getDistance(location1.coords.latitude, location1.coords.longitude, 10.7903305, 106.64076799999998))
    }

    function getDistance(lat1, lon1, lat2, lon2) {

        if (typeof (Number.prototype.toRad) === "undefined") {
            Number.prototype.toRad = function () {
                return this * Math.PI / 180;
            }
        }

        var R = 6371000; // m
        var dLat = (lat2 - lat1).toRad();
        var dLon = (lon2 - lon1).toRad();
        var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        return R * c;
    }
</script>




